<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
</head>

<body>
    <div id="app">
        <!-- Vue应用将渲染在这里 -->
        <div>
            <span>
                文章分类:<input type="text" v-model="searchCondition.category" />
                发布状态:<input type="text" v-model="searchCondition.state" />
                <button @click="selectArticleByCategoryAndState">查询</button>
                <button @click="insertArticle">新增文章</button>
            </span>
        </div>
        <table border="1px solid black">
            <tr>
                <th>文章ID</th>
                <th>标题</th>
                <th>类别</th>
                <th>发布时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="article in articleList" :key="article.id">
                <td>{{ article.id }}</td>
                <td>{{ article.title }}</td>
                <td>{{ article.category }}</td>
                <td>{{ article.time }}</td>
                <td>{{ article.state }}</td>
                <td>
                    <button @click="deleteArticle(article.id)">删除</button>
                    <button @click="updateArticle(article.id)">修改</button>
                </td>
            </tr>
        </table>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data() {
                return {
                    articleList: [],
                    searchCondition: {
                        category: '',
                        state: ''
                    },
                };
            },
            methods: {
                // 获取所有文章列表
                selectAllArticleList() {
                    axios.get('http://localhost:8080/article/selectAllArticleList')
                        .then(result => {
                            this.articleList = result.data;
                        })
                        .catch(error => {
                            console.error('获取所有文章失败:', error);
                        });
                },
                // 按条件查询文章
                selectArticleByCategoryAndState() {
                    const url = `http://localhost:8080/article/selectArticleByCategoryAndState?category=${this.searchCondition.category}&state=${this.searchCondition.state}`;
                    axios.get(url)
                        .then(result => {
                            this.articleList = result.data;
                        })
                        .catch(error => {
                            console.error('按条件查询失败:', error);
                        });
                },
                // 新增文章
                insertArticle() {
                    const url = `http://localhost:8080/article/insertArticle`;
                    axios.get(url)
                        .then(result => {
                            console.log('新增成功');
                            this.selectAllArticleList();
                        })
                        .catch(error => {
                            console.error('新增失败:', error);
                        });
                },
                // 删除文章
                deleteArticle(id) {
                    const url = `http://localhost:8080/article/deleteArticleById?id=${id}`;
                    axios.get(url)
                        .then(result => {
                            console.log('删除成功');
                            this.selectAllArticleList(); // 删除后刷新列表
                        })
                        .catch(error => {
                            console.error('删除失败:', error);
                        });
                },
                // 修改文章
                updateArticle(id) {
                    const url = `http://localhost:8080/article/updateArticleById?id=${id}`;
                    axios.get(url)
                        .then(result => {
                            console.log('修改成功');
                            this.selectAllArticleList();
                        })
                        .catch(error => {
                            console.error('修改失败:', error);
                        });
                }
            },
            mounted() {
                console.log('Vue应用已挂载');
                this.selectAllArticleList();
            }
        }).mount('#app');
    </script>
</body>

</html>